<template>
  <el-dialog :title="data.id == null ? '添加' : '编辑'" :visible.sync="visible" :close-on-click-modal="false">
    <el-form
      ref="main-form"
      status-icon
      :model="mainQuery"
      :rules="rules"
      label-width="120px"
      label-position="left"
      :inline="false"
    >
      <!-- <el-form-item label="ID" size="mini" v-if="id != null">
        <el-input placeholder="" onfocus="this.select()" v-model="id" readonly></el-input>
      </el-form-item> -->

      <el-form-item label="标题" size="mini" prop="title">
        <el-input
          placeholder=""
          v-model="mainQuery.title"
          :disabled="loading"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="公告内容" size="mini" prop="content" >
       <d2-ueditor v-model="mainQuery.content"/>
      </el-form-item>


      <el-form-item label="公告类型" size="mini" prop="type">
        <el-radio-group v-model="mainQuery.type" >
          <el-radio
          :disabled="data.id == null ? false : true"
            v-for="(item, index) in statusOptions"
            :key="index"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="展示时间" size="mini" prop="seveTime">
        <el-date-picker
          v-model="mainQuery.seveTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>

           <el-form-item v-if="mainQuery.type ==1" label="平台发送角色" size="mini" prop="">
          <el-select
            v-model="mainQuery.roleId"
            filterable
            
            size="small"
            multiple
            clearable
          >
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>


    </el-form>

    <div slot="footer" class="dialog-footer">


      <el-button @click="close" size="mini">取 消</el-button>
      <el-button @click="submit" size="mini" type="primary" :loading="loading"
        >提 交</el-button
      >
    </div>
  </el-dialog>
</template>

<script>

import util from '@/libs/util';
import ApiMain from '@/api/system.notice';
import ApiRole from '@/api/system.role';
import dayjs from "dayjs";
import CascaderSystemNode from '@/components/system/cascader-system-node';

export default {
  mixins: [
  ],

  components: {
    'cascader-system-node': CascaderSystemNode,
  },
  data() {

    return {
      roleOptions:[],
      boolOptions: [{
        value: 1,
        label: "置顶"
      }, {
        value: 0,
        label: "不置顶"
      }],
      statusOptions: [{
        value: 1,
        label: "平台用户"
      }, {
        value: 2,
        label: "商户用户"
      }, {
        value: 3,
        label: "对公账户"
      }],
      visible: false,
      popDeleteVisible: false,
      loading: false,

      mainQueryRaw: null,
      mainQuery: {
        title: '',
        isTop: 1,
        type: 1,
        seveTime: [],
        roleId:null,
        content:""
      },

      rules: {
        seveTime: [
          { required: true, message: '请选择展示时间', trigger: 'blur' },
        ],
        title: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        isTop: [
          { required: true, message: '请选择状态', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择状态', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入富文本内容', trigger: 'blur' },
        ],
     
      },

      id: null,
      data: {},

    }
  },
  mounted() {
    this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {

   async show(data) {

      this.roleOptions =await ApiRole.getOptions()
      
      if (data) {
        this.data = data;
        this.fetchData();
      } else {
        this.reset();
      }
     
      this.visible = true;
    },

    close() {
      this.visible = false;
      this.$emit('dialog-close');
    },

    reset() {

      this.mainQuery = {
        title: '',
        isTop: 1,
        type: 1,
        seveTime: [],
        roleId:null,
        content:""
      };
      this.$refs['main-form'] && this.$refs['main-form'].resetFields();
      this.$refs['cascader-system-node'] && this.$refs['cascader-system-node'].fetchOptions();

      this.id = null;
      this.data = {};
    },

    async fetchData() {
      this.loading = true;
      
      let ret = await ApiMain.info({id: this.data.id});
      this.mainQuery = {
        title: ret.title,
        isTop: ret.isTop,
        type: ret.type,
        seveTime: [new Date(ret.startTime), new Date(ret.endTime)],
        roleId: ret.roleId,
        content: ret.content
      };
      console.log(this.mainQuery);
      this.loading = false;
    },

    verifyForm() {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit() {
      // console.log(this.mainQuery)
      if (!this.verifyForm()) return false;
      this.mainQuery.startTime = dayjs(this.mainQuery.seveTime[0]).format("YYYY-MM-DD HH:mm:ss")
      this.mainQuery.endTime = dayjs(this.mainQuery.seveTime[1]).format("YYYY-MM-DD HH:mm:ss")

      // delete this.mainQuery.seveTime
      this.loading = true;
      if (this.data.id) {
        await this.submitSet();
      }
      else {
        await this.submitAdd();
      }

      this.loading = false;

    },

    async submitAdd() {

      try {
        await ApiMain.add(this.mainQuery);
        this.$message({ message: '添加成功', type: 'success' });
        this.close();
      } catch (err) {
      }

    },

    async submitSet() {
      this.mainQuery.id = this.data.id;
      try {
        await ApiMain.set(this.mainQuery);
        this.$message({ message: '修改成功', type: 'success' });
        this.close();
      } catch (e) {
      }

    },

    async submitDel() {
      this.popDeleteVisible = false;
      this.loading = true;

      try {
        await ApiMain.del({ id: this.id })
        this.$message({ message: '删除成功', type: 'success' });
        this.close();
      } catch (e) {
      }

      this.loading = false;

    },
  }
}
</script>

<style>
</style>
